<template>
  <div class="app-container">
    <!--操作-->
    <div class="filter-container">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="caseFormModel=true">案件申请</el-button>
    </div>
    <el-tabs v-model="defaultTab" type="border-card" @tab-click="switchTab">
      <el-tab-pane label="待办任务" name="upcoming">
        <!--表格-->
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >
          <el-table-column label="任务名称" align="center">
            <template slot-scope="scope">{{ scope.row.caseName }}</template>
          </el-table-column>
          <el-table-column label="流程名称" align="center">
            <template slot-scope="scope">
              {{ scope.row.formName }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间" prop="startTime" :formatter="dateFormatter" />
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button v-permission="['安络技术主管','安络技术组长']" size="mini" type="text" @click="visableDealModal(scope.row)">分配</el-button>
              <el-divider v-permission="['安络技术主管','安络技术组长']" direction="vertical" />
              <el-button size="mini" type="text" @click="visableDealModal(scope.row)">办理</el-button>
              <el-divider direction="vertical" />
              <el-button size="mini" type="text" @click="preview(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已办任务" name="processed">
        <!--表格-->
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >
          <el-table-column label="任务名称" align="center">
            <template slot-scope="scope">{{ scope.row.caseName }}</template>
          </el-table-column>
          <el-table-column label="流程名称" align="center">
            <template slot-scope="scope">
              {{ scope.row.formName }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间" prop="startTime" :formatter="dateFormatter" />
          <el-table-column align="center" label="处理时间" prop="endTime" :formatter="dateFormatter" />
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button v-permission="['安络技术主管','安络技术组长']" size="mini" type="text" @click="visableDealModal(scope.row)">重新分配</el-button>
              <el-divider v-permission="['安络技术主管','安络技术组长']" direction="vertical" />
              <el-button size="mini" type="text" @click="preview(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="我发起流程" name="instances">
        <!--表格-->
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >
          <el-table-column label="流程名称" align="center">
            <template slot-scope="scope">{{ scope.row.formName }}</template>
          </el-table-column>
          <el-table-column label="案件名称" align="center">
            <template slot-scope="scope">{{ scope.row.caseName }}</template>
          </el-table-column>
          <el-table-column align="center" label="流程名称" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.formName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发起时间" prop="startTime" :formatter="dateFormatter" />
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="preview(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!--我发起的流程预览-->
    <el-dialog :visible.sync="drawerModel" width="60%" top="1%">
      <!--流程图-->
      <el-image :src="drawerImg" style="width: 80%;" />

      <el-table :data="approvalList" height="250" style="width: 100%;padding-top: 15px;">
        <el-table-column min-width="100" label="姓名">
          <template slot-scope="scope">{{ scope.row.userName }}</template>
        </el-table-column>
        <el-table-column align="center" label="案件描述">
          <template slot-scope="scope">{{ scope.row.message }}</template>
        </el-table-column>
        <el-table-column width="200" align="center" label="时间">
          <template slot-scope="{row}">{{ row.time | formatDate }}</template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 15px;">
        <el-button type="primary" @click="findApply">申请查看结果</el-button>
      </div>
    </el-dialog>

    <!-- 案件申请弹窗 -->
    <el-dialog title="案件申请" :visible.sync="caseFormModel" width="30%">
      <el-form ref="caseForm" :model="caseForm" label-width="80px" size="medium">
        <el-form-item label="案件名称">
          <el-input v-model="caseForm.caseName" />
        </el-form-item>
        <el-form-item label="案件类型">
          <el-radio-group v-model="caseForm.caseType">
            <el-radio label="初查案件" />
            <el-radio label="深入研判" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否付费">
          <el-radio-group v-model="caseForm.isPay">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="案件内容" prop="caseContext">
          <el-input v-model="caseForm.caseContext" type="textarea" rows="5" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="caseFormModel = false">取 消</el-button>
        <el-button type="primary" @click="createCases">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 案件办理 -->
    <el-dialog title="审批意见" :visible.sync="dialogFormVisible">
      <el-form ref="form" label-width="80px">
        <el-form-item label="案件名称">
          <span>{{ formInfoForm.caseName }}</span>
        </el-form-item>
        <el-form-item label="案件描述">
          <span>{{ formInfoForm.caseContext }}</span>
        </el-form-item>
        <el-form-item label="案件类型">
          <span>{{ formInfoForm.caseType }}</span>
        </el-form-item>
      </el-form>

      <el-form :model="dealForm" label-width="80px">
        <el-form-item v-if="checkPermission(['安络技术主管'])" label="协查小组">
          <el-checkbox-group v-model="dealForm.groupList">
            <el-checkbox v-for="item in groupList || []" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item v-else-if="checkPermission(['安络技术组长'])" label="协查成员">
          <el-checkbox-group v-model="dealForm.userList">
            <el-checkbox v-for="item in userList || []" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item v-else>
          <el-input v-model="dealForm.message" type="textarea" autocomplete="off" rows="5" />
        </el-form-item>
      </el-form>

      <div v-if="checkPermission(['安络技术主管','安络技术组长'])" slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-permission="['安络技术主管']" type="primary" @click="assignToFun(dealForm.groupList)">确定</el-button>
        <el-button v-permission="['安络技术组长']" type="primary" @click="assignToFun(dealForm.userList)">确定</el-button>
      </div>
      <div v-else slot="footer" class="dialog-footer">
        <el-button type="warning" @click="complateCase('BH')">驳回</el-button>
        <el-button type="primary" @click="complateCase('TG')">通过</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  upcomingList,
  processedList,
  processInstances,
  approvalComments,
  createCases,
  dealCase,
  findAdd,
  formInfo,
  assignGroup,
  assignUser,
  assignTo
} from '../../api/task'
import { dateFormatter } from '@/utils'
import permission from '@/directive/permission/index.js' // 权限判断指令
import checkPermission from '@/utils/permission'
import { mapGetters } from 'vuex'
export default {
  name: 'Template',
  directives: { permission },
  data() {
    return {
      dialogFormVisible: false,
      dealForm: {
        taskId: '',
        processInstanceId: '',
        message: '',
        type: '',
        userList: [],
        groupList: []
      },
      drawerModel: false,
      drawerImg: '',
      approvalList: [],
      defaultTab: 'upcoming',
      list: [],
      listLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: 10
      },
      caseFormModel: false,
      caseForm: {
        caseName: '',
        caseType: '初查案件',
        caseContext: '',
        isPay: 0
      },
      findFrom: {
        id: '',
        processInstanceId: ''
      },
      formInfoForm: {},
      groupList: [],
      userList: []
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    this.switchTab({ name: 'upcoming' })
    this.getUserGroupList()
    this.getUserList()
  },
  methods: {
    dateFormatter,
    checkPermission,
    switchTab(test) {
      switch (test.name) {
        case 'upcoming':
          this.listLoading = true
          upcomingList(this.listQuery).then(response => {
            this.total = response.data.data.length
            this.list = response.data.data
            this.listLoading = false
          })
          break
        case 'processed':
          this.listLoading = true
          processedList(this.listQuery).then(response => {
            this.total = response.data.total
            this.list = response.data.data
            this.listLoading = false
          })
          break
        case 'instances':
          this.listLoading = true
          processInstances(this.listQuery).then(response => {
            this.total = response.data.total
            this.list = response.data.data
            this.listLoading = false
          })
          break
      }
    },
    preview(primary) {
      this.findFrom.id = primary.businessKey
      this.findFrom.processInstanceId = primary.processInstanceId
      const primaryKey = primary.processInstanceId
      this.drawerModel = true
      this.drawerImg = `/server/rest/formdetail/image/${primaryKey}`
      approvalComments(primaryKey).then(response => {
        this.approvalList = response.data
      })
    },
    createCases() {
      createCases(this.caseForm).then(response => {
        this.defaultTab = 'instances'
        this.switchTab({ name: 'instances' })
        this.$message.success('新增成功')
        this.caseFormModel = false
      })
    },
    visableDealModal(record) {
      this.dialogFormVisible = true
      this.dealForm.taskId = record.taskId
      this.dealForm.processInstanceId = record.processInstanceId
      formInfo({
        taskId: record.taskId,
        processInstanceId: record.processInstanceId,
        businessKey: record.businessKey
      }).then(response => {
        if (response.data.code === '100') {
          this.formInfoForm = response.data.data.formInfo
        }
      })
    },
    complateCase(type) {
      this.dealForm.type = type
      dealCase(this.dealForm).then(response => {
        this.defaultTab = 'upcoming'
        this.switchTab({ name: 'upcoming' })
        this.$message.success('处理成功')
        this.dialogFormVisible = false
      })
    },
    findApply() {
      const param = {
        'id': this.findFrom.id,
        'processInstanceId': this.findFrom.processInstanceId
      }
      findAdd(param).then(response => {
        if (response.data.code === '100') {
          this.$message.success(response.data.msg)
        } else {
          this.$message.error(response.data.msg)
        }
        this.drawerModel = false
      })
    },
    getUserGroupList() {
      assignGroup().then(response => {
        this.groupList = response.data.datas
      })
    },
    getUserList() {
      assignUser().then(response => {
        this.userList = response.data.datas
      })
    },
    assignToFun(parameters) {
      let ids = {}
      if (this.roles.includes('安络技术主管')) {
        ids = { type: 'group' }
      } else {
        ids = { type: 'user' }
      }
      assignTo(Object.assign({}, this.dealForm, ids)).then(response => {
        if (response.data.code === '100') {
          this.$message.success(response.data.msg)
        } else {
          this.$message.error(response.data.msg)
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.filter-container {
  padding-bottom: 15px;

  .modal-upload {
    display: inline-block;
  }
}
</style>
